<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" ></meta>
    <title>详细内容</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <script type="text/javascript" src="../assets/js/echarts.js"></script>
    <script src="../assets/js/views/vue.min.js"></script>
    <link href="../assets/css/bootstrap-datetimepicker.css" type="text/css">
    <script src="../assets/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/css/bootstrapDatepickr-1.0.0.css">
    <script src="../assets/js/bootstrapDatepickr-1.0.0.min.js"></script>
    <link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/paginate.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <%--<link rel="stylesheet" href="${frames}/css/table.css" type="text/css">--%>
    <%--<link rel="stylesheet" href="${frames}/css/qulitity.css" type="text/css" type="text/css">--%>
    <link rel="stylesheet" href="../assets/css/views/modules/_common.scss">
    <link rel="stylesheet" href="${assets}/css/views/department/departmentMgr.css">
    <style>
        span{
            font:17px/38px '微软雅黑';
            display:inline-block;
            color:#505050;
        }
        a{
            text-decoration:none;
        }
        .page_nav li{
            list-style:none !important;
        }
        .page_nav li span{
            margin:0 !important;
        }
        body{
            position:relative;
            top:0px;
            left:0px;
        }
        .content{
            width:68.8%;
            margin:0 auto;
            overflow:hidden;
        }
        .user{
            width:90%;
            margin:0 auto;
        }
        .user span{
            width:49.5%;
        }
        .warm{
            margin-top:30px;
        }
        .warm p{
            text-align:center;
            font:17px/25px '微软雅黑';
            color:#606060
        }
        .other p{
            font:17px/40px '微软雅黑';
            color:#606060
        }
        #tablepart p{
            text-align:center;
            font:17px/25px '微软雅黑';
        }
        #example thead tr th{
            font:17px/65px '微软雅黑';
            color:#a6a6a6;
            border-bottom:1px solid #e8e8e8;
        }
        table.dataTable td{
            text-align:left;
            line-height:45px;
        }
        table.dataTable thead > tr > th{
            margin:0 !important;
            padding:0 !important
        }
        h4{
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #2a3137;
            text-align:center;
        }
        table.datatable thead tr > th{
            text-align:left !important;
        }
        .rise{
            width:18px;
            display:inline-block;
            vertical-align: middle;
            background:url("../assets/images/rise.png") no-repeat left;
            height:30px;
            margin-top:8px;
        }
        .down{
            width:18px;
            display:inline-block;
            vertical-align: middle;
            background:url("../assets/images/down.png") no-repeat left;
            height:30px;
            margin-top:8px;
        }
        tbody tr td:nth-child(3){
            width:35px;
        }
    </style>
</head>
<body>
<div>
    <%@ include file="../../breadline.jsp" %>
</div>
<div class="wrap">
    <div id="main">
        <div style="width:99%;overflow:hidden;background-color: #ffffff;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);">
            <div class="content">
                <div>
                    <h4 style="margin-top:30px;">检测报告</h4>
                    <p style="width:95%;margin:0 auto;height: 1px;background-color: #e6e6e6;margin-top:20px;"></p>
                    <div style="width:80%;margin:0 auto;margin-top:17px;">
                        <div style="margin-top:25px;margin-bottom:28px;">
                            <img src="../assets/images/hospital.png" alt="" style="vertical-align: middle">
                            <span style="margin-left:22px;vertical-align: middle;">{{user.hospName}}</span>
                        </div>
                        <div class="user">
                            <span>姓名：{{user.realName}}</span>
                            <span>年龄：{{user.age}}</span>
                            <span>性别：{{user.sex}}</span>
                            <span>检验项目：{{testKindName}}</span>
                        </div>
                    </div>
                    <p style="width:95%;margin:0 auto;height: 1px;background-color: #e6e6e6;margin-top:20px;"></p>
                </div>
                <div style="width:71.5%;margin:0 auto;">
                    <div id="tablepart">
                        <table id="example" class="display" cellspacing="10" width="100%">
                            <thead>
                            <tr>
                                <th>项目名称</th>
                                <th>结果</th>
                                <th style="width:18px;">&nbsp;</th>
                                <th>参考值</th>
                                <th>单位</th>
                            </tr>
                            </thead>
                        </table>
                        <p v-show="!mainjson" style="margin-top:20px;">暂无数据</p>
                    </div>
                </div>
                <div style="border-top:1px solid #e8e8e8;margin-top:200px;">
                    <p style="width:95%;margin:0 auto;height: 1px;background-color: #e6e6e6;margin-bottom:30px;"></p>
                    <div style="width:80%;margin:0 auto;">
                        <div class="other">
                            <p>报告时间：{{time}}</p>
                            <p>报告医生：</p>
                        </div>
                        <div class="warm">
                            <p>此报告仅对送检标本负责！结果供送检医生参考，如有疑问请及时前往医院核对，<br>复诊</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
     var vm = new Vue({
         el:'#main',
         data:{
             // 是否有数据
             mainjson:false,
             user:'',
             testTime:'',
             testKindName:"",
             time : ""
         },
         methods:{

         },
         mounted(){
             // 获取当前idcard
             let that = this;
             // 截取字符串
             var url = location.search.slice(8);
//             console.log(url)
             var arr = url.split("&");
             var idCard = arr[0];
//             console.log(idCard)
             var testKindCode = arr[2].split('=')[1];
             var testTime = arr[1].split('=')[1];
             var Time = testTime.split('%');
             that.testTime = Time[0]+" "+Time[1].replace('20','').slice(0,8)
             var testKindName = arr[3].split('=')[1];
             that.testKindName = decodeURI(testKindName)
             that.time = that.testTime.slice(0,10)
//             console.log(testKindCode)
//             console.log(that.testTime)
             $.ajax({
                 url:"${URL_PATIENT_RECORDDETAIL}",
                 dataType:"json",
                 type:"post",
                 data:{
                     idCard:idCard,
                     testKindCode:testKindCode,
                     testTime:that.testTime
                 },
                 success:function(data){
                     // 渲染数据
                     that.user = data.data;
                     if( that.user.list.length === 0 ){
                         that.mainjson = false;
                     }else{
                         that.mainjson = true;
                         for( var a = 0; a < that.user.list.length; a++ ){
                             if( that.user.list[a].consultHigh == null || that.user.list[a].consultLow == null ){
                                 that.user.list[a].source = ""
                             }else{
                                 that.user.list[a].source = that.user.list[a].consultLow+"-"+that.user.list[a].consultHigh
                             }
                         }
                         $('#example').DataTable({
                             data: that.user.list,
                             aoColumns : [ {
                                 mDataProp : "testItemName"
                             },{
                                 mDataProp : "testValue"
                             },{
                                 targets: 2,
                                 data: null,
                                 fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                                     if( oData.consultHigh != null ){
                                         if( oData.testValue > oData.consultHigh ){
                                             $(nTd).text(" ")
                                             $(nTd).addClass("rise")
                                         }else if( oData.testValue < oData.consultLow  ){
                                             $(nTd).text(" ")
                                             $(nTd).addClass("down")
                                         }
                                     }else{
                                         $(nTd).text(" ")
                                     }
                                 }
                             },{
                                 mDataProp : "source"
                             },{
                                 mDataProp : "valueUnit"
                             }],
                             lengthChange : false,
                             paging : false,
                             searching : false,
                             info: false,
                             bAutoWidth: false,
                             bSort: false,
                         })
                     }
                 }
             })
         }
     })
</script>
</body>
</html>
